import React from 'react';
import { ArrowRight, Play, Sparkles } from 'lucide-react';

const Banner = () => {
  return (
    <section className="banner" aria-label="核心服务介绍">
      <div className="container">
        <div className="banner-content">
          <div className="banner-badge">
            <Sparkles size={16} />
            <span>专业云管理服务</span>
          </div>
          <h1>
            智能云管理服务
            <span className="gradient-text">数字化转型</span>
          </h1>
          <p>全栈能力覆盖企业数字资产的管理和运营，助力企业数字化转型，提供一站式云解决方案</p>
          <div className="banner-actions">
            <a href="/contact" className="banner-btn">
              立即申请
              <ArrowRight size={18} />
            </a>
            <a href="#solutions" className="banner-btn secondary">
              <Play size={18} />
              了解更多
            </a>
          </div>
          <div className="banner-stats">
            <div className="stat-item">
              <div className="stat-number">3000+</div>
              <div className="stat-label">企业客户</div>
            </div>
            <div className="stat-item">
              <div className="stat-number">99.9%</div>
              <div className="stat-label">服务可用性</div>
            </div>
            <div className="stat-item">
              <div className="stat-number">24/7</div>
              <div className="stat-label">技术支持</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Banner;
